<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
		<style>
			#content {
				overflow: scroll;
			}
			
			.item {}
			
			.item .name {
				height: 60px;
				background-color: green;
				margin-bottom: 10px;
			}
		</style>
	</head>

	<body>
		<div id="content">
			<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
				<div class="item" v-for="data in list">
					<div class="name">{{data.name}}</div>
				</div>
			</mt-loadmore>
		</div>
	</body>
	<!-- 先引入 Vue -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
	<script>
		var p = 10;
		var vue = new Vue({
			el: "#content",
			data: {
				list: [],
				allLoaded: false
			},
			methods: {
				loadBottom: function() {
					this.$refs.loadmore.onBottomLoaded();
					this.getList();
				},
				getList: function() {
					var i = 0,
						list0 = [];
					for(i; i < p; i++) {
						list0.push({
							demo: i
						});
					}
					p += 10;
					this.list = list0;
				}
			},
			mounted: function() {
				this.getList();
			}
		})
	</script>

</html>